iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
Modern Web

html跟css神奇的化學反應系列 第 20

day 20 css 的 flex container (2)

  • 分享至 

  • xImage
  •  

今天就繼續昨天沒有説完的吧~

justify-content

justify-content這個屬性呢是將項目彈性對齊的屬性。

他主要有六個屬性可以去調整網頁:

  • center 中心
  • flex-start 對齊開頭
  • flex-end 對齊末端
  • space-around 行前,行間,行後留出空間
  • space-between 行之間有空格
  • space-evenly 項目間空間相等

接下來就看看他們都會是怎麽顯示排版的吧~

center

https://ithelp.ithome.com.tw/upload/images/20240927/20168629vLiijMdTfL.png

flex-start

https://ithelp.ithome.com.tw/upload/images/20240927/20168629Qm3kmQBmkh.png

flex-end

https://ithelp.ithome.com.tw/upload/images/20240927/20168629vWcBlnK9jd.png

space-around

https://ithelp.ithome.com.tw/upload/images/20240927/20168629ccngQQAvVe.png

space-between

https://ithelp.ithome.com.tw/upload/images/20240927/20168629f2k8QJC6He.png

space-evenly

https://ithelp.ithome.com.tw/upload/images/20240927/201686299g3j4uPEBi.png

這邊就是可以幫助網頁排版的屬性啦~今天這一篇比較短,還有兩個屬性是還沒寫的,之所以會留下那兩個的原因是那兩個是有一點差不多的東西所以就打算把他們兩個寫在一起~

今天就這樣啦~ 我們明天見~


上一篇
day 19 css的 flex container
下一篇
day 21 css的flex container (3)
系列文
html跟css神奇的化學反應30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言